{% load staticfiles %}<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="{% static "images/favicon.ico" %}">
    <title>{% block title %}{% endblock %}</title>

    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link href="{% static "css/common.css" %}" rel="stylesheet">
    {% block style %}{% endblock %}
</head>

<body>
    <!-- 顶部导航 -->
    <div class="navbar navbar-inverse navbar-static-top navbar-fixed-top" role="navigation">
        <div class="container-fluid">
            <div class="navbar-header">
                <!-- .navbar-toggle样式用于toggle收缩的内容，即nav-collapse collapse样式所在元素 -->
                <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-responsive-collapse">
                    <span class="sr-only">Toggle Navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <!-- 确保无论是宽屏还是窄屏，navbar-brand都显示 -->
                <a href="{% url 'index' %}" >
                    <img src="{% static "images/logofx.jpg" %}" style="margin-top:3px;margin-right:30px;margin-left:30px;margin-bottom:3px;width: 107px; height: 43px;" alt="FxData" />
                </a>
            </div> <!-- navbar-header -->
            <!-- 屏幕宽度小于768px时，div.navbar-responsive-collapse容器里的内容都会隐藏，显示icon-bar图标，当点击icon-bar图标时，再展开。屏幕大于768px时，默认显示。 -->
            <div class="collapse navbar-collapse navbar-responsive-collapse">
                <ul class="nav navbar-nav">
                    <li><a href="{% url 'server_list' %}"><span class="glyphicon glyphicon-home"></span>&nbsp;首页</a></li>
                    <li><a href="{% url 'server_list' %}">设备清单</a></li>
                    <li><a href="{% url 'server_list' %}">设备组</a></li>
                    <li><a href="{% url 'server_list' %}">监控</a></li>
                    <li><a href="{% url 'server_list' %}">操作日志</a></li>
                </ul>

                <!-- 个人中心 -->
                <ul class="nav navbar-nav navbar-right" style="padding-right:8px">

                    {% if request.user.is_authenticated or user.is_authenticated %}
                        <li>
                            <a href="{% url 'logout' %}">
                                <span class="glyphicon glyphicon-log-out">&nbsp;</span>
                            </a>
                        </li>
                        <li>
                          <a href="#"><img src="{% static 'images/avatar.svg' %}" width="55%" height="55%"></a>
                        </li>
                    {% endif %}
                </ul>

            </div> <!-- navbar-responsive-collapse -->
        </div> <!-- container-fluid -->
    </div> <!-- 顶部导航 -->
    <br><br><br>
    {% block content %}{% endblock %}
    <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
    <script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script src="{% static 'js/common.js' %}"></script>
    {% block script %}{% endblock %}
</body>
</html>
